<template>
  <ContentWrap>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="请假类型" :label-width="140">
        <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="detailData.type ?? '' " />
      </el-descriptions-item>
      <el-descriptions-item label="开始时间" :label-width="140">
        {{ formatDate(detailData.startTime, 'YYYY-MM-DD') }}
        <el-tag type="success" v-if="detailData.startType === 1">上午</el-tag>
                  <el-tag type="primary" v-else-if="detailData.startType === 2">下午</el-tag>
                  <el-tag type="info" v-else>未知</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="结束时间" :label-width="140" >
        {{ formatDate(detailData.endTime, 'YYYY-MM-DD') }}
        <el-tag type="success" v-if="detailData.endType === 1">上午</el-tag>
                  <el-tag type="primary" v-else-if="detailData.endType === 2">下午</el-tag>
                  <el-tag type="info" v-else>未知</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="申请时长" :label-width="140">
        {{ detailData.day }} 天
      </el-descriptions-item>
        <!-- <el-descriptions-item label="单位" :label-width="140">
          {{ detailData.unit=='hour' ? '小时' : '天' }}
        </el-descriptions-item> -->
      <el-descriptions-item label="原因" :label-width="140">
        {{ detailData.reason }}
      </el-descriptions-item>
    </el-descriptions>
    <OaFileManager class="mt-3" :header="false"  :initial-file-ids="detailData.files" />
  </ContentWrap>

</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { LeaveApplyApi, LeaveApplyVO } from '@/api/oa/leaveapply'
import { getFileListByIds } from '@/api/infra/file'
defineOptions({ name: 'OaLeaveApplyDetail' })

const { query } = useRoute() // 查询参数

const props = defineProps({
  id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
const selectedFileDetails = ref<Object[]>([]) // 选中的文件详情
/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  try {
    detailData.value = await LeaveApplyApi.getLeaveApply(props.id || queryId)
    detailData.value.files = detailData.value.files
    selectedFileDetails.value = await getFileListByIdsApi(detailData.value.files)
  } finally {
    detailLoading.value = false
  }
}
// mock 文件详情接口
const getFileListByIdsApi = async (ids: string[]) => {
  // 实际项目应调用后端接口，这里 mock 返回
  return getFileListByIds(ids)
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>
